<%--
  Created by IntelliJ IDEA.
  User: ctx
  Date: 2021/9/9
  Time: 16:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<%--<meta http-equiv="content-security-policy" content="script-src ‘self’">--%>
<title>房屋一览</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
      integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
</head>
<body>
<script type="text/javascript">

    function selectHouse(obj){
        $('#detailsModal').modal('show');
        //获取当前行的所有列
        var tds= $(obj).parent().parent().find('td');
        //(".id"):通过class属性获取当前需要填写数据的输入框
        //$(tds.eq(0)).text():通过下标取得对应列中的值

        $("#XHouseId").text(tds.eq(0).text())
        $("#XHouseArea").text(tds.eq(1).text())
        $("#XHouseEstate").text(tds.eq(2).text())
        $("#XHouseUnitnumber").text(tds.eq(3).text())
        $("#XHouseFloor").text(tds.eq(4).text())
        $("#XHouseRoomno").text(tds.eq(5).text())
        $("#XHouseAcreage").text(tds.eq(6).text())
        $("#XHouseDirection").text(tds.eq(7).text())
        $("#XHouseFitment").text(tds.eq(8).text())
        $("#XHouseIsdoubleair").text(tds.eq(9).text())
        $("#XHouseLimit").text(tds.eq(10).text())
        $("#XHouseFacility").text(tds.eq(11).text())
        $("#XHousePrice").text(tds.eq(12).text())
        $("#XHouseStatus").text(tds.eq(13).text())
        $("#XHousehImg").text(tds.eq(14).text())
        $("#XHouseAddress").text(tds.eq(15).text())
        $("#XHouseAddtime").text(tds.eq(16).text())
        $("#XHouseUpdatetime").text(tds.eq(17).text())
    }


    $(function () {

<%--        <c:forEach items="${pageInfo.list}" var="House">--%>
<%--        $("#House_details${House.hId}").click(function () {--%>
<%--            &lt;%&ndash;alert(${House.hId});&ndash;%&gt;--%>
<%--            $("#detailsModal").modal({--%>
<%--                backdrop: "static"--%>
<%--            })--%>
<%--        });--%>
<%--        </c:forEach>--%>
    })

    function addHouse() {
        $("#addHouseModal").modal({
            backdrop: "static"
        })
    }

</script>

<div class="box">
    <h3 style="text-align: center">房屋信息管理</h3>
    <div class="actions">
        <div>
            <button class="btn btn-primary btn-sm" onclick="addHouse()">添加房屋信息</button>
        </div>
        <%--
            模糊查询输入框
        --%>
        <div style="margin-left: 280px;font-size:20px ">
            <form action="/houseList" method="get">
                <select name="field">
                    <option value="haddress" ${field=='haddress'?'selected':""} >地址</option>
                    <option value="hprice" ${field=='hprice'?'selected':""}>价格</option>
                    <option value="hrentStatus" ${field='hrentStatus'?'selected':""}>出租状态</option>
                </select>
                <input type="text" placeholder="输入关键词" name="keyword" value="${keyword}">
                <input type="submit" value="搜索">
            </form>
        </div>
    </div>

    <table class="table table-hover">
        <tr>
            <td>编号</td>
            <td>区域</td>
            <td>所属小区</td>
            <td>单元号</td>
            <td>楼层</td>
            <td>房间号</td>
            <td>面积</td>
            <td>朝向</td>
            <td>操作</td>
        </tr>

        <C:forEach var="House" items="${pageInfo.list}">
            <tr>
                <td>${House.hId}</td>
                <td>${House.hArea}</td>
                <td>${House.hEstate}</td>
                <td>${House.hUnitnumber}</td>
                <td>${House.hFloor}</td>
                <td>${House.hRoomno}</td>
                <td>${House.hAcreage}</td>
                <td>${House.hDirection}</td>
                <td>
                    <a title="详情" id="House_details${House.hId}" onclick="selectHouse(this)" ><span
                            class="glyphicon glyphicon-option-vertical"></span></a>
                    &nbsp;&nbsp;
                    <a title="编辑" href="/houseUpdate?id=${house.hid}"><span
                            class="glyphicon glyphicon-pencil"></span></a>
                    &nbsp;&nbsp;
                    <a title="删除" href="/houseDelete?id=${house.hid}"
                       onclick="confirmDelete(${house.hid})"><span class="glyphicon glyphicon-trash"></span></a>
                </td>
            </tr>
        </C:forEach>
    </table>
    <div class="pager-info">
        <div>共有 ${pageInfo.total} 条记录，第 ${pageInfo.pageNum}/${pageInfo.pages} 页</div>
        <div class="col-md-6"></div>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li><a href="getAll?pn=1">首页</a></li>

                <li>
                    <a  <C:if test="${pageInfo.hasPreviousPage}"> href="getAll?pn=${pageInfo.pageNum-1}" </C:if>
                            aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <C:forEach items="${pageInfo.navigatepageNums}" var="pageNum">

                    <li <C:if test="${pageNum==pageInfo.pageNum}">class="active"</C:if>>
                        <a href="getAll?pn=${pageNum}">${pageNum}</a>
                    </li>
                </C:forEach>
                <li>
                    <a  <C:if test="${pageInfo.hasNextPage}"> href="getAll?pn=${pageInfo.pageNum+1}" </C:if>
                            aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>

                <li><a href="getAll?pn=${pageInfo.pages}">末页</a></li>
            </ul>
        </nav>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">详细信息</h4>
            </div>
            <div class="modal-body">
                <div>
                    <table class="mailTable">
                        <tr>
                            <td class="column">编号</td>
                            <td id="XHouseId"></td>
                        </tr>
                        <tr>
                            <td class="column">区域</td>
                            <td id="XHouseArea"></td>
                        </tr>
                        <tr>
                            <td class="column">所属小区</td>
                            <td id="XHouseEstate"></td>
                        </tr>
                        <tr>
                            <td class="column">单元号</td>
                            <td id="XHouseUnitnumber"></td>
                        </tr>
                        <tr>
                            <td class="column">楼层</td>
                            <td id="XHouseFloor"></td>
                        </tr>
                        <tr>
                            <td class="column">房间号</td>
                            <td id="XHouseRoomno"></td>
                        </tr>
                        <tr>
                            <td class="column">面积</td>
                            <td id="XHouseAcreage"></td>
                        </tr>
                        <tr>
                            <td class="column">朝向</td>
                            <td id="XHouseDirection"></td>
                        </tr>
                        <tr>
                            <td class="column">装修情况</td>
                            <td id="XHouseFitment"></td>
                        </tr>
                        <tr>
                            <td class="column">是否双气</td>
                            <td id="XHouseIsdoubleair"></td>
                        </tr>
                        <tr>
                            <td class="column">限住人数</td>
                            <td id="XHouseLimit"></td>
                        </tr>
                        <tr>
                            <td class="column">配套设施</td>
                            <td id="XHouseFacility"></td>
                        </tr>
                        <tr>
                            <td class="column">出租价格</td>
                            <td id="XHousePrice"></td>
                        </tr>
                        <tr>
                            <td class="column">出租状态</td>
                            <td id="XHouseStatus"></td>
                        </tr>
                        <tr>
                            <td class="column">房子图片</td>
                            <td id="XHousehImg"></td>
                        </tr>
                        <tr>
                            <td class="column">完整地址</td>
                            <td id="XHouseAddress"></td>
                        </tr>
                        <tr>
                            <td class="column">收房时间</td>
                            <td id="XHouseAddtime"></td>
                        </tr>
                        <tr>
                            <td class="column">更新时间</td>
                            <td id="XHouseUpdatetime"></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">更改</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="addHouseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addModalLabel">新增房屋</h4>
            </div>
            <form action="/House/addHouse">
                <div class="modal-body">
                    <div>
                        <table class="mailTable">
                            <tr>
                                <td class="column">区域</td>
                                <td><input type="text" id="newArea" name="hEstate" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">所属小区</td>
                                <td><input type="text" id="newEstate" name="hEstate" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">单元号</td>
                                <td><input type="text" id="newUnitnumber" name="hUnitnumber" class="form-control"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="column">楼层</td>
                                <td><input type="text" id="newFloor" name="hFloor" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">房间号</td>
                                <td><input type="text" id="newRoomno" name="hRoomno" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">面积</td>
                                <td><input type="text" id="newAcreage" name="hAcreage" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">朝向</td>
                                <td><input type="text" id="newDirection" name="hDirection" class="form-control"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="column">装修情况</td>
                                <td><input type="text" id="newFitment" name="hFitment" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">是否双气</td>
                                <td><input type="text" id="newIsdoubleair" name="hIsdoubleair" class="form-control"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="column">限住人数</td>
                                <td><input type="text" id="newLimit" name="hLimit" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">配套设施</td>
                                <td><input type="text" id="newFacility" name="hFacility" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">出租价格</td>
                                <td><input type="text" id="newPrice" name="hPrice" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">出租状态</td>
                                <td><input type="text" id="newStatus" name="hStatus" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">房子图片</td>
                                <td><input type="text" id="newImg" name="hImg" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">完整地址</td>
                                <td><input type="text" id="newAddress" name="hAddress" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">收房时间</td>
                                <td><input type="text" id="newAddtime" name="hAddtime" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td class="column">更新时间</td>
                                <td><input type="text" id="newUpdatetime" name="hUpdatetime" class="form-control"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" onsubmit="addHouse()">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>


<%--<script src="../../lib/jquery/jquery.js"></script>--%>
</body>
</html>